import { Image, Text, View } from '@tarojs/components';
import Taro, { useLoad } from '@tarojs/taro';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setActivePage } from '@/store/userDataSlice'; import './IndexFooterBar.scss';
import IconFont from './IconFont';





type FooterBarItemType = {
    title: string,
    icon: React.ReactNode;
    onClick?: (any?) => void;
    active?: boolean;
};
const FooterBarItem = ({ title, icon, onClick, active }: FooterBarItemType) => {
    return (
        <View onClick={onClick} className='FooterBarItemContainer'>
            {icon}
            <Text style={active ? { color: "red" } : {}}>{title}</Text>
        </View>
    );
};



const IndexFooterBar = () => {
    // useLoad(() => {
    //     setActivePage("主页");
    // });

    // const [activePage, setActivePage] = React.useState("主页");
    const dispatch = useDispatch();
    const userData = useSelector((state: any) => state.userData);
    const handleClick = (e: React.MouseEvent, title, url) => {
        dispatch(setActivePage(title));
        Taro.navigateTo({
            url: `/pages${url}`
        });
    };
    return (
        <View className='FooterBarContainer-out'>
            <View className='FooterBarContainer'>
                {[["主页", "home", "/index/index"], ["电影", "movie", "/movie/movie"], ["电影院", "Movies", "/cinema/cinema"], ["我的", "my", "/demo/demo"]].map((item, index) =>
                    <FooterBarItem key={index} active={userData.activePage === item[0] ? true : false} title={item[0]} onClick={(e) => handleClick(e, item[0], item[2])} icon={<IconFont key={index} style={userData.activePage === item[0] ? { color: "red", fontWeight: "bold" } : { fontWeight: "bold" }} name={item[1]} />} />
                )}

            </View>
        </View>
    );
};

export default IndexFooterBar;
